<!-- 打印准考证 -->
<template>
  <TitleInfo title="打印准考证" />
  <el-form label-width="auto" v-show="state==0" :rules="rules" :model="examParam" ref="ruleFormRef"
    style="max-width: 600px;margin: 45px auto 0;">
    <el-form-item label="报考项目：" prop="projectId">
      <el-select v-model="examParam.projectId" placeholder="请选择报考项目" @change="findLevelList" size="large">
        <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="报考等级：" prop="levelId">
      <el-select v-model="examParam.levelId" placeholder="请选择报考等级" @change="findShowingsList" size="large">
        <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="报考场次：" prop="showingsId">
      <el-select v-model="examParam.showingsId" placeholder="请选择报考场次" size="large">
        <el-option v-for="item in showingsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button class="btn_step" type="primary" @click="onSubmit(ruleFormRef)">打印</el-button>
      <!-- <el-button>Cancel</el-button> -->
    </el-form-item>
    
  </el-form>
  <div  v-show="state==1">
    <el-table :data="dataSource" v-if="dataSource?.length>0" v-loading="loading"
      element-loading-text="正在加载pdf......." border style="width: 100%"  >
        <el-table-column prop="egName" label="英文名称" />
        <el-table-column prop="name" label="中文名" />
        <el-table-column prop="idCard" label="身份证号" />
        <el-table-column prop="admissionNum" label="准考证号" />
        <el-table-column prop="courseName" label="考试模块" />
        <el-table-column prop="courseDate" label="考试时间" />
        <el-table-column label="操作" width="80">
            <template #default="scope">
                <el-button size="small"  @click="show(scope?.row.id)" type="primary"  >
                    浏览
                </el-button>
                
                <!-- <el-button size="small" type="danger">
                    取消
                </el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <el-empty v-else :description="description"></el-empty>
      <div class="btn_all"> 
       <el-button class="btn_step" type="primary" @click="step">返回打印准考证</el-button>
      </div>
  </div>
  
</template>
<script setup lang="ts">
 import type { ShowingsModel, ProjectModel, LevelModel, ExamParam,AdmissionTicketModel } from "../../api/person/exam"
import { projectListApi, levelListApi, showingsListApi,admissionTicketApi } from "../../api/person/exam"
import {showAdmissionNumApi} from "../../api/member/order"
import { FormRules, FormInstance } from "element-plus"
const description=ref<string>('暂无数据')
const ruleFormRef = ref<FormInstance>();
const state=ref<number>(0)
  const loading = ref(false)

const levelList = ref<LevelModel[]>([])
const showingsList = ref<ShowingsModel[]>()
const projectList = ref<ProjectModel[]>([])
const examParam = ref<ExamParam>({
  projectId: '',
  levelId: '',
  showingsId: '',
  city: '',
  amount: '',
  courseIds:''
})
const rules = reactive<FormRules<ExamParam>>({
  projectId: [
    { required: true, message: '请选择报考项目', trigger: 'change' },
  ],
  levelId: [
    { required: true, message: '请选择报考等级', trigger: 'change' },
  ],
  showingsId: [
    { required: true, message: '请选择报考场次', trigger: 'change' },
  ],

})
onMounted(async () => {
  const response = await projectListApi()
  if (response.code === 200) {
    projectList.value = response.data ?? []
  } else {
    ElMessage.error(response.msg)
  }
})
async function findLevelList() {
  const res = await levelListApi(examParam.value.projectId)
  if (res.code === 200) {
    levelList.value = res.data ?? []
  } else {
    ElMessage.error(res.msg)
  }
}

const dataSource=ref<AdmissionTicketModel[]>([])

async function findShowingsList() {
  const res = await showingsListApi(examParam.value.projectId, examParam.value.levelId)
  if (res.code === 200) {
    showingsList.value = res.data ?? []
  } else {
    ElMessage.error(res.msg)
  }
}

const onSubmit = async (formEl: FormInstance | undefined) => { 
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
        state.value=1
        const res= await admissionTicketApi(examParam.value) 
        if(res.code===200){
          dataSource.value=res.data
        }else{
          ElMessage.error(res.msg)
        }


    } else {
      console.log("error submit!", fields);
    }
  });
}

function step(){
  state.value=0
}

async function show(id:number){
  loading.value=true
  const res= await showAdmissionNumApi(id)
  loading.value=false
  if(res.code===200){
    window.open(res.data.path)
  }else{
    ElMessage.error(res.msg)
  }
}

</script>
<style scoped lang='less'>
:deep(.el-form-item__content) {
  justify-content: center;
}

.btn_step {
  margin: 20px 10px 0;
  display: block;
  width: 213px;
  height: 48px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin: 30px auto 0;
  background-color: #345aa3;
  cursor: pointer;
}
</style>